<template>
  <div class="v-container">
    <v-header title="机场贵宾厅">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </span>
    </v-header>
    <v-dialog v-if="dialogWhetherShow" v-on:listenDialog="listenDialog">
      <header style="margin-top:20px">
        机场贵宾厅预约信息
      </header>
      <div class="popup_con">
        <table>
          <tbody>
            <tr>
              <td class="td1">姓名：</td>
              <td class="td2">{{reserveInfo.userName}}</td>
            </tr>
            <tr>
              <td class="td1">手机号：</td>
              <td class="td2">{{reserveInfo.telephone}}</td>
            </tr>
            <tr>
              <td class="td1">机场名称：</td>
              <td class="td2">{{reserveInfo.airportName}}</td>
            </tr>
            <tr>
              <td class="td1">贵宾室名称：</td>
              <td class="td2">{{reserveInfo.viprName}}</td>
            </tr>
            <tr>
              <td class="td1">预约时间：</td>
              <td class="td2">{{reserveInfo.bespeakTime}}</td>
            </tr>
              
          </tbody>
        </table>
      </div>
      <!--<ul class="dialog-ul">
        <li><span>姓名:</span><span>{{reserveInfo.userName}}</span></li>
        <li><span>手机号:</span><span>{{reserveInfo.telephone}}</span></li>
        <li><span>机场名称:</span><span>{{reserveInfo.airportName}}</span></li>
        <li><span>贵宾室名称:</span><span>{{reserveInfo.viprName}}</span></li>
        <li><span>预约时间:</span><span>{{reserveInfo.bespeakTime}}</span></li>
      </ul>-->
      <div>
        <mt-button type="default" style="border-top-left-radius:20px;border-bottom-left-radius:20px;border-top-right-radius:0px;border-bottom-right-radius:0px;border:1px solid #F37938" @click="dialogWhetherShow = false">取消提交</mt-button>
        <mt-button type="default" style="border-top-right-radius:20px;border-bottom-right-radius:20px;border-top-left-radius:0px;border-bottom-left-radius:0px;background-color:#F37938;color:#fff" @click="Confirmsubmit()">确定提交</mt-button>
      </div>
    </v-dialog>
    <div class="mt" style="position:relative">
      <img src="@/assets/images/jcgbt_banner.jpg" width="100%">
      <span @click="$router.push('/airportVipServiceArea')" style="margin-top: 10px;padding: 10px;color: orange;position:absolute;top:120px;left:8px">点击查看机场贵宾厅服务范围>></span>

      <div class="login-box">
        <ul class="itemList">
          <li>
            <mt-field label="姓名:" placeholder="请输入姓名" v-model="reserveInfo.userName" disabled></mt-field>
          </li>
          <li>
            <mt-field label="手机号:" placeholder="请输入手机号" type="number" v-model="reserveInfo.telephone" disabled></mt-field>
          </li>
          <li @click="toAirportList()">
            <mt-field label="机场名称:" placeholder="请选择机场" v-model="reserveInfo.airportName" disabled></mt-field>
          </li>
          <li @click="whetherGo">
            <mt-field label="贵宾室名称:" placeholder="请选择贵宾室" v-model="reserveInfo.viprName" disabled></mt-field>
          </li>

          <li @click="chooseTime">
            <mt-field label="预约时间:" placeholder="请选择服务时间" v-model="reserveInfo.bespeakTime" disabled></mt-field>
          </li>
          <!-- <date-picker v-model="value12" lang="en" type="time" minute-step="30" format="HH:mm:ss" placeholder="Select Time"></date-picker> -->
           <!-- <date-picker v-model="time" lang="en" type="datetime" format="[on] MM-DD-YYYY [at] HH:mm" :minute-step=30></date-picker> -->


          <!-- <date-picker ref="picker" v-model="time1" valueType="YYYY-MM-DD" minute-step="30"	 :first-day-of-week="1"></date-picker> -->
          <mt-datetime-picker ref="picker" type="datetime" v-model="time" @confirm="confirm" :startDate="startDate" :endDate="endtDate" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" hour-format="{value} 时" minute-format="{value} 分"></mt-datetime-picker>

        </ul>

        <div id="login-title" style="background-color: #fff;margin-top: 10px;padding:10px">
          <h3 class="h3-style" style="margin:0px 0px 0px 5px;">服务流程</h3>
        </div>

        <div
          class="login-title"
          style="background-color: #fff;border-top:1px solid #80808030;padding: 10px 15px"
        >
          <ul>
            <li>1.客户可通过线上（EXEED星途官方微信服务号-尊享权益兑换-验证权益人身份-点击“机场贵宾厅”-在线选择预约日期时间及机场贵宾厅）或致电4008801768-3进行预约，预约成功后服务不可取消，如未使用，仍然扣除相应权益；</li>
            <li>2.客服/系统将用户选择的贵宾厅所在位置、营业时间、服务券码，通过短信发送至星途尊享权益车主手机号；</li>
            <li>3.客户到贵宾厅出示星途尊享权益车主身份证件和服务券码，核验权益人身份后即可享用服务；</li>
            <li>4.如该厅提供登机提醒服务，服务人员询问航班号，在登机前15分钟提醒登机；</li>
          </ul>
        </div>

        <div class="login-title" style="margin-top:10px">
          <div class="c_select" @click="changeSelect()">
            <img v-show="!select" src="@/assets/images/4_05.png" width="25">
            <img v-show="select" src="@/assets/images/3_05.png" width="25">
          </div>
          <span @click="toAirportVipTerms()">我已了解该服务条款</span>
        </div>
      </div>

      <div class="button-box" v-on:click="confirmDialog">
        <p>预约</p>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from "@/components/Header.vue";
import vDialog from "@/components/Dialog.vue";
import countDown from "@/components/CountDown.vue";
import { Toast } from "mint-ui";
import { Resource } from "@/services/resource";
import LocalStorage from "@/services/storage";
import { formatDate } from "../../../common/utils/dateFormate/dateFormate.js"
import DatePicker from 'vue2-datepicker'

export default {
  components: {
    vHeader,
    vDialog,
    countDown,
    DatePicker
  },
  props: {
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {
      time: new Date(),
      select: false,
      dialogWhetherShow: false,
      reserveInfo: {
        telphone: "",
        bespeakTime: "",
        userName: "",
        airportName: "",
        airportCode: "",
        airportType: 1,
        viprName: "",
        startAddress: "123",
        endAddress: "123123",
        bespType: "VIPR",
        smallServiceTypeCode: "SLS0002",
        deLatitude: "123",
        deLongitude: "123",
        longitude: "123",
        latitude: "123",
        countyName:"静安区",
        desCountyName:"徐汇区",
        distance:'10',
        city:"上海市"
      }
    };
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.reserveInfo.telephone = userInfo.telephone
    this.reserveInfo.userName = userInfo.userName

    if (this.$route.query.airportName !== undefined) {
      this.reserveInfo.airportName = this.$route.query.airportName;
      this.reserveInfo.airportCode = this.$route.query.airportCode;
    }

    if(this.$route.query.select !== undefined) {
      this.select = this.$route.query.select
    }

    console.log(this.$route.query.viprName)

    if(this.$route.query.viprName !== undefined) {
      this.reserveInfo.viprName = this.$route.query.viprName
    }
    if(this.$route.query.bespeakTime) {
      this.reserveInfo.bespeakTime = this.$route.query.bespeakTime
    }
    console.log(this.reserveInfo.viprName)
  },
  computed: {
    startDate() {
      let curDate = new Date();
      let preDate = new Date(curDate.getTime() + 2*60*60*1000); //前一天
      return preDate
    },
    endtDate() {
      let curDate = new Date();
      let nextDate = new Date(curDate.getTime() + 24*60*60*1000); //前一天
      return nextDate
    }
  },
  methods: {
    // 去服务条款页
    toAirportVipTerms(){
      let _ = this
      let airportInfo = {
        airportName:_.reserveInfo.airportName,
        viprName:_.reserveInfo.viprName,
        bespeakTime:_.reserveInfo.bespeakTime
      }
      _.$router.push({path:"/airportVipTerms",query:airportInfo})
    },
    // $router.push('/airportList')
    toAirportList(){
      let _ = this
      _.$router.push({path:'/airportList',query:{bespeakTime:_.reserveInfo.bespeakTime}})
    },
    // 返回上一页
    goBack() {
      // this.$router.go(-1);
      this.$router.push("/mainpage");
    },
    Confirmsubmit() {
      Resource.createBespeak.post({}, this.reserveInfo ).then(res => {
        console.log(res)
        if (res.head.resultCode == '000000') {
          Toast({
            message: '创建预约订单成功',
            iconClass: 'el-icon-success'
          });
          this.$router.push('/order')
        }else{
          this.dialogWhetherShow = false
          Toast({
            message: res.head.resultMsg,
            position: 'middle'
          });
        }
      });
    },
    submit() {
        Resource.createBespeak.post({}, this.reserveInfo ).then(res => {
          console.log(res)
          if (res.head.resultCode == '000000') {
            Toast({
              message: '创建预约订单成功',
              iconClass: 'el-icon-success'
            });
            this.$router.push('/mainpage')
          }else{
            this.dialogWhetherShow = false
            Toast({
              message: res.head.resultMsg,
              position: 'middle'
            });
          }
          
        });
    },
    confirmDialog() {
      if (this.reserveInfo.airportName === "") {
        Toast({
          message: "请选择机场",
          position: 'middle'
        });
      } else if (this.reserveInfo.viprName === "") {
        Toast({
          message: "该机场暂无服务资源",
          position: 'middle'
        });
      } else if (this.reserveInfo.bespeakTime === "") {
        Toast({
          message: "请选择预约时间",
          position: 'middle'
        });
      }else if (!this.select) {
        Toast({
          message: "请勾选服务条款",
          position: 'middle'
        });
      } else {
        this.dialogWhetherShow = true
      }
    },
    changeSelect() {
      this.select = !this.select;
    },
    whetherGo() {
      if (this.$route.query.airportName == undefined) {
        Toast({
          message: "请选择机场后查看贵宾室",
          position: 'middle'
        });
      } else {
        console.log(123);
        this.$router.push({
          path: "/airportVipRoomList",
          query: {
            airportCode: this.$route.query.airportCode,
            airportName: this.$route.query.airportName,
            bespeakTime:this.reserveInfo.bespeakTime
          }
        });
      }
    },
    chooseTime() {
      this.$refs.picker.open();
    },
    confirm() {
      if(this.time !== '') {
        this.reserveInfo.bespeakTime = formatDate(this.time)
      }
    },
    listenDialog(data) {
      this.dialogWhetherShow = data
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>
<style scoped>
li >>> .mint-field-other {
  position: static;
}
</style>